<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="telephone=no" />
        <title>发票</title>
        <link rel="stylesheet" type="text/css" href="../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../css/common.css" />
        <style>
            .aui-bar-primary {
                background: #fff;
                border-bottom: 1px solid #ccc;
            }
            .aui-bar .aui-iconfont, .aui-title{
                color: #646464;
            }
            .invoiceType{
                width: 100%;
                overflow: hidden;
                color:#000;
                text-align: left;
                padding:0 15px 15px;
            }
            .check{
                overflow: hidden;
            }
            .check li:not(:first-of-type){
                margin-left: 5%;
            }
            .check .aui-iconfont{
                right: 0;
                bottom: -17px;
            }
            .check li{
                height: 28px;
                line-height: 28px;
            }
            footer{
                width: 80%;
                margin: 0 auto;
                margin-top: 15px;
            }
            .contain{
                /*width: 200%;*/
                position: relative;
                overflow: hidden;
                /*transition: 0.5s;*/
                margin-top: 15px;
            }
            /*.ordinaryInvoice,
            .increaseInvoice{
                float: left;
                width: 50%;

            }*/
            input.inputCardNo {
                line-height: 25px;
                margin: 0;
                width: inherit;
                padding: 0;
                border: 0;
                width: 70%;
            }
            .increase{
                display: none;
            }
        </style>
    </head>
    <body>
    <header class="aui-bar aui-bar-nav aui-bar-primary">
        <a class="aui-pull-left">
            <span class="aui-iconfont aui-icon-left" onclick="closeWin()"></span>
        </a>
        <div class="aui-title">普通发票</div>
        <div class="invoiceType aui-border-t">
            <span class="aui-text-left">发票类型</span>
            <ul class="check">
                <li class="active aui-border" data-type="ordinary" tapmode onclick="checkInvoice(this)"><i class="aui-iconfont aui-icon-check"></i>普通发票</li>
                <li class="aui-border" data-type="increase"  tapmode onclick="checkInvoice(this)"><i class="aui-iconfont aui-icon-check"></i>增值发票</li>
                <li class="aui-border" tapmode onclick="checkInvoice(this)"><i class="aui-iconfont aui-icon-check"></i>不开发票</li>
            </ul>
        </div>
    </header>
    <div class="contain">
        <ul class="aui-list-view ordinary">
            <li class="aui-list-view-cell" >
                <span>发票抬头</span>
                <input type="text"  oninput="showBtn('ordinary')" onpropertychange="showBtn('ordinary')"   class="inputCardNo" name="" placeholder="请输入发票抬头" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>发票内容</span>
                <input type="text"  oninput="showBtn('ordinary')" onpropertychange="showBtn('ordinary')"   class="inputCardNo" name="" placeholder="请输入发票内容" value="">
            </li>
        </ul>  
        <ul class="aui-list-view increase">
            <li class="aui-list-view-cell" >
                <span>识别码</span>
                <input type="text"  oninput="showBtn('increase')" onpropertychange="showBtn('increase')"   class="inputCardNo" name="" placeholder="请输入纳税人识别码" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>开户银行</span>
                <input type="text"  oninput="showBtn('increase')" onpropertychange="showBtn('increase')"   class="inputCardNo" name="" placeholder="请输入开户银行" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>开户账号</span>
                <input type="text"  oninput="showBtn('increase')" onpropertychange="showBtn('increase')"   class="inputCardNo" name="" placeholder="请输入开户账号" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>电话</span>
                <input type="number" oninput="showBtn('increase')" onpropertychange="showBtn('increase')"    class="inputCardNo" name="" placeholder="请输入电话号码" value="">
            </li>
            <li class="aui-list-view-cell" >
                <span>地址</span>
                <input type="text" oninput="showBtn('increase')" onpropertychange="showBtn('increase')"  class="inputCardNo" name="" placeholder="请输入地址" value="">
            </li>
        </ul> 
    </div>
    <footer>
        <div class="myBtn disable">确定</div>
    </footer>
    </body>
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        apiready = function() {
            api.parseTapmode();
        }
        //选择发票类型checkInvoice
        function checkInvoice(obj){
            $(obj).parent().find("li").removeClass("active");
            $(obj).addClass("active");
            //切换
            var dataType=$(obj).attr("data-type");
            $(".contain").css({"display":"block"});
            if(dataType=="increase"){
                $(".increase").css({"display":"block"});
                $(".aui-title").text("增值发票");
                showBtn("increase");
            }else if(dataType=="ordinary"){
                $(".increase").css({"display":"none"});
                $(".aui-title").text("普通发票");
                showBtn("ordinary");
            }else{
                 $(".contain").css({"display":"none"});
                $(".aui-title").text("不开发票");
                $(".myBtn").removeClass("disable");
            }
        }
        function showBtn(type){
            // 分别检查普通和增值的
            if(type=="ordinary"){
                if(checkInput("ordinary")){
                    $(".myBtn").removeClass("disable");
                }else{
                    $(".myBtn").addClass("disable");
                }
            }else if(type=="increase"){
                if(checkInput("ordinary")&&checkInput("increase")){
                    $(".myBtn").removeClass("disable");
                }else{
                    $(".myBtn").addClass("disable");
                }
            }
        }
        //检查普通的是否已填写
        function checkInput(type){
            var len=$("."+type).find("input").length;
            var indexs;
            $("."+type).find("input").each(function(index){
                if($(this).val().trim()==""){
                    return false;
                }
                indexs=index;
            })
            if(indexs==(len-1)){
                return true;
            }else{
                return false;
            }
        }
    </script>
</html>
